<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script language="JavaScript" type="text/javascript">
        function doSign(prvkey,msgsigned) {
            var rsa = new RSAKey();
            rsa.readPrivateKeyFromPEMString(prvkey);
            var hSig = rsa.sign(msgsigned, 'SHA256');
            return linebrk(hSig, 64);
        }

        function doVerify() {
            var sMsg = document.form1.msgverified.value;
            var hSig = document.form1.sigverified.value;

            var pubKey = KEYUTIL.getKey(document.form1.cert.value);
            var isValid = pubKey.verify(sMsg, hSig);

            // display verification result
            if (isValid) {
                _displayStatus("valid");
            } else {
                _displayStatus("invalid");
            }
        }

        function copyMsgAndSig() {
            _displayStatus("reset");
            document.form1.msgverified.value = document.form1.msgsigned.value;
            document.form1.sigverified.value = document.form1.siggenerated.value;
        }

        function _displayStatus(sStatus) {
            var div1 = document.getElementById("verifyresult");
            if (sStatus == "valid") {
                div1.style.backgroundColor = "skyblue";
                div1.innerHTML = "This signature is *VALID*.";
            } else if (sStatus == "invalid") {
                div1.style.backgroundColor = "deeppink";
                div1.innerHTML = "This signature is *NOT VALID*.";
            } else {
                div1.style.backgroundColor = "yellow";
                div1.innerHTML = "Please fill values below and push [Verify this sigunature] button.";
            }
        }

    </script>
</head>
<body>
<h1>JSEncrypt Example</h1>
<div class="container">
    <label for="privkey">Private Key (私钥)</label>
    <br/>
    <textarea id="privkey" rows="20" cols="65" v-model="privkey">

    </textarea>
    <br/>
    <label for="pubkey">Public Key (公钥)</label>
    <br/>
    <textarea id="pubkey" rows="10" cols="65" v-model="pubkey">
    </textarea>
    <br/>
    <label for="input">Text to encrypt:</label><br/>
    <textarea id="input" name="input" type="text" rows=4 cols="65" v-model="message">This is a test!</textarea><br/>
    <input id="testme" type="button" value="Test" @click="getKey"/><br/>
</div>

<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/jsrsasign-all-min.js"></script>
<script>
    new Vue({
        el: '.container',
        data() {
            return {
                pubkey: '-----BEGIN PUBLIC KEY-----\n' +
                    'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzkoffO2Lc+gD6XxTUh68\n' +
                    'c3wiImzobeXimjW39ZY23nxoaO5JgGTE21HYxWFOC+Sp1BXQ5uNLIrnZI9y8M+jg\n' +
                    'DrXuXxZxzW4WP8lSHtjo5naopJJHxTPlQjeHeovrguFMUwp/Dyj8TNr3Fl/8fOK9\n' +
                    'u74CqiKOQxIsj/2paVW+joJew79aHixszZjBWjjtk1nlxGeUSCzBEE7ENLpQLWcG\n' +
                    'KPZQ2OHvLTxLiktpHbSh/X/cIhvYNIFh3W9twBtAq/u39hbNVtUDNz1QWod00ZE8\n' +
                    'hsVnoO/3MN7focbYGcLJ3HGOKpgw7x/juE+nUmic1A0pqzOcyevi+RZBLTbvsG0Y\n' +
                    'CQIDAQAB\n' +
                    '-----END PUBLIC KEY-----',
                privkey: '-----BEGIN RSA PRIVATE KEY-----\n' +
                    'MIIEowIBAAKCAQEAzkoffO2Lc+gD6XxTUh68c3wiImzobeXimjW39ZY23nxoaO5J\n' +
                    'gGTE21HYxWFOC+Sp1BXQ5uNLIrnZI9y8M+jgDrXuXxZxzW4WP8lSHtjo5naopJJH\n' +
                    'xTPlQjeHeovrguFMUwp/Dyj8TNr3Fl/8fOK9u74CqiKOQxIsj/2paVW+joJew79a\n' +
                    'HixszZjBWjjtk1nlxGeUSCzBEE7ENLpQLWcGKPZQ2OHvLTxLiktpHbSh/X/cIhvY\n' +
                    'NIFh3W9twBtAq/u39hbNVtUDNz1QWod00ZE8hsVnoO/3MN7focbYGcLJ3HGOKpgw\n' +
                    '7x/juE+nUmic1A0pqzOcyevi+RZBLTbvsG0YCQIDAQABAoIBAGeIlB0jK6ZUgAIj\n' +
                    'P74rZvGfD5Kvjkf55Kz44QcFCSzIy64+Se2CpbpdbapCl+UoMoQbHumCkicvl2eE\n' +
                    'VYDIFAvOC4D1xtAPvGLvK6QHwXxJeYJ/WD4FOb7uF7TNnLnnUWMsFXEKZPY9v10f\n' +
                    'd51GP2uGhdfV2AiZinwKF4iiXC0xIpMHtWySsp/pWf63rfCoW/qBD/r1+qXoyosI\n' +
                    'NfeQWTiOHOtV/+b+VTuokowqQDi5VN6t4uYiTc7y2der6k+i9SdTDrmJOMAFZZp+\n' +
                    'ReNMrXFXYeE1ICYVW+RLAqt+cDNdJT2gEh6pmOXh3Jj890MBwduL1TRQjSWkrFsu\n' +
                    '/hBLDfECgYEA7E/1xhnolcwVQxOs9hXTH2XUa75JCeWpesM9t2MtVgh2fSGm0VpA\n' +
                    'oqRQChTEOw8QsmFkkDSKdMdEG8WTgVpwPbMeKErVuwMcngv6vW6XDgU0P0RnJHuD\n' +
                    'A6VYGzvS+0zXq1PZLiEuPtiES66uzcCEtX2gULf7PL29M3Phu5zGZdMCgYEA33nX\n' +
                    'JfZRG8GxXgWne4Ty/ESiNP3Hh0FIenJePDReOygB4sW/N2A+V9iEzXx2499yk0J8\n' +
                    'DjfmVUa69T9Rl9C1v7sb1tqPSCG2Pi9DRcXlOVMMklyqrzFYuxEE/WJtPahfMnwM\n' +
                    'QHy45Lr5gfjkLYgVgc3Euq59euD0+qwTWWDxlTMCgYBMKj15+zHGzj9wHjBaJJCm\n' +
                    'hwifLXaXFQm6AqGqsPGU0Cd4j1cYFPHOOg1+IlFZA7MK+28RN44Es5EVLmorf/27\n' +
                    'NTccH3qhyw/3NL89PR68qxq65Y4k6RZCH5G1PWP0EUFV/DF8t78TDHAfgI7gzBM5\n' +
                    '9+KrAZGdcz4/DjOMZ6xedwKBgFwaGQO6Sp9H6tO3PNl5Z7N0je2NEii6TSa58ACc\n' +
                    'DKIQ0QYnPbGS5t7Ji6Isw8sSkmQCqKIrg7BtoCvnVrdc+yrz8HtSRG8UBcoHLJCb\n' +
                    'COfhRHMl4eqmSc1/LDFJ2X/p3qIt4dbKEGGkdaSNcW0agtKmfYf61hhIkm6lcKwL\n' +
                    'ekVlAoGBAIDUqHBADuhuFbEmz/2zuXZRAj3LDcf1JM4nxYR0/PikEea2dgUGxgN3\n' +
                    'M9p+d0PzvnPYCLuSoSWMxN6zBqOQ7WldfC9uKObicw/ltc9OHFIAbdJeDGLOeA9k\n' +
                    '9UZyZ9wLwViRuYNBOm8+LBVL3e6jyzDE+EwT3J2jZk7zqV17uIZA\n' +
                    '-----END RSA PRIVATE KEY-----',
                message: 'xiaohong',
            }
        },
        methods: {
            getKey() {
                // 2. 使用密钥加密
                var rsa = new RSAKey();  //创建rsa实例
                //因为后端提供的是pck#8的密钥对，所以这里使用 KEYUTIL.getKey来解析密钥
                // yourPEMKey替换为后端提供的密钥
                rsa = KEYUTIL.getKey(this.pubkey);
                // 设定签名以 SHA256 为基准，其他还有sha1等，详见文档
                var sig = new KJUR.crypto.Signature({"alg": "SHA256withRSA"});
                // 初始化
                sig.init(rsa);
                // 传入代加密字符串
                sig.updateString(this.message);
                // 生成密文
                // var sign = hextob64(sig.sign());
                // var sign = utf8tob64(sig.sign());
                var sign = hextob64(doSign(this.pubkey,this.message));
                // 对加密后内容进行URI编码
                sign=encodeURIComponent(sign);
                // 最后拼接参数，提交（类似：http://xxx.xxx.com?a=1&b=2&sign=asqaswf）
                var url = 'http://localhost:18891/encrypt/decode?'+'&arr='+sign;
                // ajax提交
                xiaohong.http.get(url).then(resp => {
                        if(resp.data.code === 20000){
                            console.log(resp.data.data);
                        }
                    }
                ).catch(() => {
                    console.log('解密失败')
                })
            }
        }
    })
</script>
</body>
</html>
